<style>
    .daiban-content {
        margin-bottom: 0px;
        background-color: #DEE9F5;
        font-size: 12px;
        min-height: 435px;
    }
    .daiban-content .daiban-card {
        margin-bottom: 0px;
        background-color: #DEE9F5;
        border-bottom: 1px solid #D2D2D2;
    }
    .daiban-card .blockTitle {
		color: #296ECA;
        padding-left: 35px;
	}
	.daiban-card .blockTitle .title-icon {
		width: 18px;
		height: 18px;
		line-height: 12px;
		left: 15px;
		color: #5DC5DC;
    }
    .daiban-card .title-more {
        float: right;
        cursor: pointer;
    }
    .daiban-card .chart-content {
        width: 100%;
        height: 170px;
        position: relative;
    }
    .daiban-card .c-left-chart {
        display: inline-block;
        width: 49%;
        height: 145px;
        position: relative;
    }
    .daiban-card .c-right-chart {
        display: inline-block;
        width: 49%;
        height: 145px;
        position: relative;
    }
    .daiban-card .c-chart-content {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .daiban-card .chart-type-title {
        position: absolute;
        width: 100%;
        line-height: 185px;
        text-align: center;
        font-weight: 700px;
        color: black;
        z-index: 2019;
    }
    .daiban-card .chart-title {
        height: 25px;
    }
    .daiban-card .czLegend {
        display: inline-block;
        width: 21px;
        height: 10px;
        background: url('../../../dist/style/res/index/cz.png') no-repeat left top;
        background-size: 100% 100%;
    }
    .daiban-card .xaLegend {
        display: inline-block;
        width: 21px;
        height: 10px;
        background: url('../../../dist/style/res/index/xf.png') no-repeat left top;
        background-size: 100% 100%;
    }
    .daiban-card .emergency-title {
        height: 30px;
        line-height: 30px;
        color: #333333;
    }
    .daiban-card .emergency-content {
        width: 100%;
        height: 170px;
        padding-top: 5px;
    }
    .daiban-card .emergency-item {
        box-sizing: content-box;
        float: left;
        width: 105px;
        height: 80px;
        padding: 5px 5px 0px 5px;
        cursor: pointer;
    }
    .daiban-card .img-icon {
        display: inline-block;
        vertical-align: top;
        width: 42px;
        height: 42px;
    }
    .daiban-card .emergency-item .time {
        display: inline-block;
        width: 55px;
        height: 42px;
    }
    .daiban-card .emergency-item .time p {
        height: 20px;
        line-height: 20px;
    }
    .daiban-card .emergency-item .leftTime {
        color: #FF6000;
        font-size: 12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    /* .daiban-card .emergency-item .leftTime span {
        font-size: 12px;
    } */
    .daiban-card .emergency-item .taskName {
        width: 100%;
        text-align: left;
        font-size: 12px;
        line-height: 28px;
        height: 28px;
        padding-left: 5px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
</style>
<script type="text/html" template lay-done="layui.data.isshowDone(d)">
<div class="daiban-content">
    <div class="layui-card daiban-card">
        <div class="layui-card-header blockTitle">
            <i class="layui-icon layui-icon-form title-icon"></i>
            任务待办
            <span class="title-more T-checkEvent" data-target="more">MORE</span>
        </div>
        <div class="layui-card-body">
            <div class="chart-content">
                <div class="chart-title" style="text-align: right;">
                    <span class='czLegend'></span>&nbsp;常驻任务&nbsp;&nbsp;&nbsp;
                    <span class='xaLegend'></span>&nbsp;下发任务
                </div>
                <div class="c-left-chart">
                    <div id="i-left-chart" class="c-chart-content">
                    </div>
                    <div class="chart-type-title">待填报</div>
                </div>
                <div class="c-right-chart">
                    <div id="i-right-chart" class="c-chart-content"></div>
                    <div class="chart-type-title">待审核</div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card daiban-card">
        <div class="layui-card-header emergency-title">
            任务紧急情况
        </div>
        <div class="layui-card-body" style="padding: 0px;">
            <div id="i-emergency-content" class="emergency-content">
            </div>
        </div>
    </div>
</div>
</script>
<script type="text/html" id="daibanEmergengcyTpl">
    {{#  if(!!d.warnings && d.warnings.length && d.warnings.length > 0){
        $.each(d.warnings, function(index, item) {
            var url = item.state === '25' === 0 ? '../../../dist/style/res/index/audit.png' : '../../../dist/style/res/index/fill.png';
    }}
        <div class="emergency-item T-checkEvent" data-target="detail" data-connection="{{item.connection}}" data-id="{{item.id}}"
         data-type="{{item.tasktype}}" data-checking="{{item.checking}}" data-state="{{item.state}}">
            <img class="img-icon" src="{{url}}" alt="">
            <div class="time">
                <p>剩余时间</p>
                <p class="leftTime" lay-tips="{{item.remaintime}}">{{item.remaintime}}</p>
            </div>
            <div class="taskName" lay-tips="{{item.taskname}}">{{item.taskname}}</div>
        </div>
    {{#  
        })
     }}
    <div class="emergency-item T-checkEvent" data-target="more" id="moreInfo">
        <img class="img-icon" src="../../../dist/style/res/index/more.png" alt="">
        <div class="time">更多</div>
        <div class="taskName"></div>
    </div>
    {{#
        } 
    }}
</script>
<script>
    layui.data.isshowDone = function(d){
layui.use(['admin','echarts'], function(){
    var $ = layui.$,
    admin = layui.admin,
    echarts = layui.echarts,
    router = layui.router(),
    laytpl = layui.laytpl,
    isIEEight = false,
    allTask = [];

    getTaskdata();

    if(d.params.show && d.params.show == '1'){
        admin.req({
            type:"get",
            url: 'myapi/DC/api/rest/web/custom/BacklogHome',
            success: function(res){
                var sumTask = res.data.sumTask || [],
                    allList = JSON.parse(JSON.stringify(sumTask));
                layer.open({
                    id: 'daiban-enmergencyHtml',
                    title:'紧急任务',
                    offset: '20px',
                    type: 1,
                    shadeClose: true,
                    area: ['600px', '600px'],
                    success: function(lay) {
                        view(this.id).render('./IndexPage/components/emergencyTable',{list: allList});
                    }
                });
            }
        });
    }
    var DEFAULT_VERSION = 8.0;  
    var ua = navigator.userAgent.toLowerCase();  
    var isIE = ua.indexOf("msie")>-1;  
    var safariVersion;  
    if(isIE){  
        safariVersion =  ua.match(/msie ([\d.]+)/)[1];  
    }  
    if(safariVersion <= DEFAULT_VERSION ){ 
        isIEEight = true;
    /*  alert('系统检测到您正在使用ie8以下内核的浏览器，不能实现完美体验，请更换或升级浏览器访问！'); */
    };
    var userdata =layui.data('userdata');

    var leftChart = echarts.init(document.getElementById('i-left-chart')),
        rightChart = echarts.init(document.getElementById('i-right-chart'));

    function getTaskdata(){
        admin.req({
            type:"get",
            url: 'myapi/DC/api/rest/web/custom/BacklogHome',
            success: function(res){
                var writeCount = res.data.writeCount || 0,
                    auditCount = res.data.auditCount || 0,
                    sumTask = res.data.sumTask || [];
                    allTask = JSON.parse(JSON.stringify(sumTask));
                setChart(leftChart, {name:'待填报', value: writeCount});
                setChart(rightChart, {name:'待审核', value: auditCount});
                setList(sumTask.length > 5 ? sumTask.slice(0,5) : sumTask);
            }
        });
    }

    $('.daiban-content').on('click', '.T-checkEvent', function() {
        var target = $(this).data('target');
        switch(target) {
            case 'more':
                layer.open({
                    id: 'daiban-enmergencyHtml',
                    title:'紧急任务',
                    offset: '20px',
                    type: 1,
                    shadeClose: true,
                    area: ['600px', '600px'],
                    success: function(lay) {
                        view(this.id).render('./IndexPage/components/emergencyTable',{list: allTask});
                    }
                });
            break;
            case 'detail':
                var connection = $(this).data('connection'),
                    id = $(this).data('id'),
                    type = $(this).data('type'),
                    state = $(this).data('state'),
                    isChecking = $(this).data('checking');
                if(state === 25) {
                    location.hash = "/"+connection+'/isReview=1/id='+id+'/type='+type+'/isChecking='+isChecking;
                }else if(state === 40) {
                    location.hash = "/"+connection+'/isReview=1/id='+id;
                }
                
            break;
            default:
            break;
        }
    })



    //渲染仪表盘chart
    function setChart(chart, data) {
        var colors = [
            ['#FA8A1D', '#FDF864'],
            ['#5CA5F8', '#64FDDD']
        ];
        var titleArr= [
            {
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: '16',
                color: '#389af4',
                textAlign: 'center',
            },
        }];
        var colors1 = !!isIEEight ? colors[0][0] : {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: colors[0][0] // 0% 处的颜色
            }, {
                offset: 1, color: colors[0][1] // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        };
        var colors2 = !!isIEEight ? colors[1][0] : {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: colors[1][0] // 0% 处的颜色
            }, {
                offset: 1, color: colors[1][1] // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        };
        var seriesArr=[
            {
                //name: data.name,
                type: 'pie',
                clockWise: true,
                radius: [40, 50],
                startAngle: 115,
                itemStyle:  {
                    normal: {
                        color: colors1,
                        shadowColor:  '#389af4',
                        shadowBlur: 0,
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                    }
                },
                hoverAnimation: false,
                center: ['50%', '50%'],
                data: [{
                    value: 60, //data.value,
                    label: {
                        normal: {
                            formatter: function(params){
                                return data.name;
                            },
                            position: 'center',
                            show: false,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'bold',
                                color:  'black',
                            }
                        }
                    },
                }, {
                    value: 40, //100-data.value,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: '#D5E4F5'
                        },
                        emphasis: {
                            color: '#dfeaff'
                        }
                    }
                }]
            },
            {
                //name: data.name,
                type: 'pie',
                clockWise: true,
                radius: [60, 70],
                startAngle: 145,
                itemStyle:  {
                    normal: {
                        color:  colors2,
                        shadowColor:  '#ff8c37',
                        shadowBlur: 0,
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                    }
                },
                hoverAnimation: false,
                center: ['50%', '50%'],
                data: [{
                    value: 45, //data.value,
                    label: {
                        normal: {
                            formatter: function(params){
                                return data.value;
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                padding: [0,0,10,0],
                                fontSize: '26',
                                fontWeight: 'bold',
                                color:  '#4099F0',
                            }
                        }
                    },
                }, {
                    value: 75,//100-data.value,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: '#D5E9F3'
                        },
                        emphasis: {
                            color: '#ffdcc3'
                        }
                    }
                }]
            }
        ];

        var option = {
            backgroundColor: "#DEE9F5",
            title:titleArr,
            series: seriesArr
        };
        chart.setOption(option);
    };

    //渲染下方列表
    function setList(list) {
        var getTpl = daibanEmergengcyTpl.innerHTML;
        var viewHtml = document.getElementById('i-emergency-content');
        laytpl(getTpl).render({warnings: list}, function(html){
            viewHtml.innerHTML = html;
        });
    }
    
});
    }
</script>